<template>
	<base-page bgColor="#F4F4F4">
		<cu-custom :isBack="true" :backSolt='backSolt' bgColor="bg-white" slot="header">
			<!-- #ifdef MP-WEIXIN -->
			<block slot="backbox">
				<view class="flex-box">
					<view class="goBack-icon" @click="BackPage">
						<image :src="staticImgUrl+'chat/gobackIcon.png'" mode=""></image>
					</view>
					<view class="flex-box">
						<!-- 						<view class="message-icon">
							<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/message.png" mode=""></image>
						</view> -->
<!-- 						<view class="report-icon" @click="join()">
							<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/detail-share.png" mode=""></image>
						</view> -->
					</view>
				</view>
			</block>
			<!-- #endif -->
			<block slot="content">
				<view class="text-center text-black ">个人创作</view>
			</block>
			<!-- #ifdef H5 -->
			<block slot="right">
				<view class="flex-box" style="margin-right: 24rpx;">
					<!-- 					<view class="message-icon">
						<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/message.png" mode=""></image>
					</view> -->
<!-- 					<view class="report-icon" @click="join()">
						<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/detail-share.png" mode=""></image>
					</view> -->
				</view>
			</block>
			<!-- #endif -->
		</cu-custom>

		<view slot="center">
			<view class="individual">
				<view class="individual-box">
					<view class="individual-icon">
						<image v-if="baseinfoObj.headimg==''" src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shop/avatar.png"
						 mode=""></image>
						<image :src="baseinfoObj.headimg" mode="" v-if="baseinfoObj.headimg!=''"></image>
					</view>
					<view class="individual-name">{{baseinfoObj.nickname}}</view>
					<block v-if='dy==true'>
						<view class="link-btns" v-if="isShop==0" @click="addFollowBtn()">
							+关注
						</view>
						<view class="link-btns" v-if="isShop==1" @click="delFollowBtn()">
							已关注
						</view>
					</block>

				</view>
				<view class="pvInfo">
					<view class="pv-text">
						<view class="pv-num">{{baseinfoObj.content_num||0}}</view>
						<view class="pv-textname">发布</view>
					</view>
					<view class="pv-text">
						<view class="pv-num">{{baseinfoObj.fans_num||0}}</view>
						<view class="pv-textname">粉丝</view>
					</view>
					<view class="pv-text">
						<view class="pv-num">{{baseinfoObj.love_num||0}}</view>
						<view class="pv-textname">获赞</view>
					</view>
				</view>


				<view class="fgx"></view>


				<view>
					<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
					<menu-tabs v-model="tabIndex" :tabs="tabs" v-if="tabs.length > 5" :fixed="true" :tab-width="142" @change="tabBtn"
					 backColor="transparent" lineColor="red"></menu-tabs>
					<menu-tabs v-model="tabIndex" :tabs="tabs" v-else :fixed="false" @change="tabBtn" backColor="transparent"
					 lineColor="red"></menu-tabs>
				</view>

			</view>
			<swiper class="swiper_group" :indicator-dots="false" :current="tabIndex" @change="swiperCall">
				<swiper-item>
					<swiperlist :show="0" :tw='1' :req='1' :tabIndex="tabIndex"></swiperlist>
				</swiper-item>
				<swiper-item>
					<swiperlist :show="1" :req='2' :tabIndex="tabIndex"></swiperlist>
				</swiper-item>

			</swiper>

			<div class="popContainer" @click="join()" v-if="isJoin">
				<div class="imgHy">
					<image :src="staticImgUrl+'logo.png'"></image>
				</div>
				<div class="fxHy">点击右上角分享给亲朋好友吧~</div>
			</div>

		</view>




	</base-page>
</template>

<script>
	import swiperlist from './components/swiperlist.vue'
	import MescrollMixin from '@/components/mescroll/mescroll-mixins.js';
	import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js';
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		name: "creation",
		data() {
			return {
				backSolt: false,
				tabs: ['图文', '视频'],
				tabIndex: 0,
				mescroll: null,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
						tip: '~ 空空如也 ~' // 提示
					}
				},
				isJoin: false,
				baseinfoObj: {},
				isShop:0,
				member_id:0,
				dy:true
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		components: {
			swiperlist: swiperlist
		},
		onLoad() {
			if (!this.$util.isLoginCall()) return false;
			this.tabIndex = Number(0);
		
			setTimeout(() => {
				let member_id = this.$Router.queryObj().member_id
				this.member_id = Number(this.$Router.queryObj().member_id)
				this.getbaseinfo(this.$Router.queryObj().member_id)
				uni.setStorageSync('produceMember_id',Number(this.$Router.queryObj().member_id))
				if(this.userInfo.member_id == this.$Router.queryObj().member_id){
					this.dy = false
				}
			}, 300);
		},
		onShow(){
		},
		created() {

		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.backSolt = true
			// #endif
			this.pagesLen = getCurrentPages().length;
		},
		methods: {
			getbaseinfo(member_id) {
				$Axios.post(`api/member/baseinfo`, {
					member_id: member_id
				}).then(res => {
					this.baseinfoObj = res
					this.isShop = res.is_subscribe
				})

			},
			//是否弹窗
			join() {
				let that = this
				that.isJoin = !that.isJoin
			},
			//禁止页面滚动(规避警告)
			stopSlide() {
				return
			},
			BackPage() {
				// 判断页面栈是否只有一个
				if (this.pagesLen == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			tabBtn(val) {
				// this.mescroll.resetUpScroll();
				this.tabIndex = val;
			},
			swiperCall(e) {
				this.tabIndex = e.detail.current;
			},
			delFollowBtn() {
				var that = this
				if (!this.$Utils.isLoginCall()) return false;
				uni.showModal({
					title: '温馨提示',
					content: '是否确定取消关注该用户?',
					success: res => {
						if (res.confirm) {
							$Axios.post(`api/MemberFollow/deleteMemberFollow`, {
								followers_id: that.member_id
							}).then(res => {
								that.$Utils.tip('取消关注成功');
								that.isShop = 0;
							})
						}
					}
				});
			},
			addFollowBtn() {
				var that = this
				if (!this.$Utils.isLoginCall()) return false;
				$Axios.post(`api/MemberFollow/addMemberFollow`, {
					followers_id: that.member_id
				}).then(res => {
					this.$Utils.tip('关注成功');
					this.isShop = 1;
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.swiper_group {
		height: 100vh;
	}

	.flex-box {
		display: flex;
		align-items: center;
	}

	.goBack-icon {
		width: 19rpx;
		height: 36rpx;
		margin-right: 40rpx;
	}

	.message-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.report-icon {
		margin-left: 30rpx;
		width: 52rpx;
		height: 52rpx;
	}

	.individual {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;

		.individual-box {
			padding: 34rpx;
			display: flex;
			align-items: center;
			position: relative;

			.individual-icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 5rpx solid #FF394B;
				background-color: #ccc;
			}

			.individual-icon image {
				border-radius: 50%;
			}

			.individual-name {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding-left: 20rpx;
			}
		}

		.pvInfo {
			display: flex;
			justify-content: flex-start;
			padding-top: 20rpx;
			padding-left: 34rpx;

			.pv-text {
				margin-right: 100rpx;
				text-align: center;
			}

			.pv-num {
				font-size: 32rpx;
				font-family: DIN;
				font-weight: 500;
				color: #100F2A;
			}

			.pv-textname {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.fgx {
		width: 100%;
		height: 3rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.discover-conten {
		height: 100%;
	}

	.popContainer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.9);
		z-index: 999999999;
	}

	.imgHy {
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.imgHy image {
		border-radius: 50%;
	}

	.fxHy {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 50rpx;
		text-align: center;
	}

	.link-btns {
		position: absolute;
		top: 50%;
		left: 90%;
		transform: translate(-50%, -50%);
		width: 120rpx;
		height: 56rpx;
		background: linear-gradient(90deg, #FF7124, #FF364E);
		border-radius: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
	}
</style>
